<div fxLayout="rows" fxLayout.lt-sm="column" style="width: 100%">
  <div fxFlex="50%" fxLayout="column" fxLayoutGap="0.6rem">
    <h2>
      <i nz-icon [nzType]="enemy.icon"></i>
      {{ enemy.name }}
      <span
        [class.text-danger]="enemy.level > ms.game.enemyManager.maxLevel"
        class="monospace"
        >{{ enemy.level | number: "1.0-0" }}</span
      >
      <i nz-icon nzType="fa-s:arrows-alt-h" class="distance-icon"></i>
      <span>{{ enemy.distance | format }}</span>
    </h2>
    <div>
      <nz-button-group>
        <button
          nz-button
          nzType="primary"
          (click)="attack()"
          [disabled]="
            ms.game.enemyManager.currentEnemy ||
            enemy.level > ms.game.enemyManager.maxLevel
          "
        >
          <span>Attack</span>
        </button>
        <button nz-button nzDanger (click)="delete()">
          <i nz-icon nzType="delete"></i>
          <span>Delete</span>
        </button>
      </nz-button-group>
    </div>
    <div>
      <nz-alert
        *ngIf="enemy.level > ms.game.enemyManager.maxLevel"
        nzType="error"
        nzMessage="Level is over max level, cannot attack."
        [nzDescription]="
          'Defeat any enemy of level ' +
          ms.game.enemyManager.maxLevel +
          ' to increase max level.'
        "
        nzShowIcon
      >
      </nz-alert>
      <nz-alert
        *ngIf="ms.game.enemyManager.currentEnemy"
        nzType="info"
        [nzMessage]="
          'You are already attacking ' +
          ms.game.enemyManager.currentEnemy.name +
          ' lv. ' +
          ms.game.enemyManager.currentEnemy.level
        "
        nzShowIcon
      >
      </nz-alert>

      <h3>Tiles</h3>
      <ul class="list-unstyled">
        <li
          *ngFor="let tile of enemy.tiles; trackBy: getTileId"
          [ngClass]="tile.unit.colorClass"
        >
          <strong>
            <span class="monospace">{{
              tile.number | number: "1.0-0"
            }}</span></strong
          >
          <i nz-icon [nzType]="tile.unit.icon" class="tile-icon"></i>
          {{ tile.unit.name }}
        </li>
      </ul>
    </div>
  </div>
  <div fxFlex="50%">
    <app-ships-view [designs]="enemy.designs" [isEnemy]="true" [enemy]="enemy">
    </app-ships-view>
  </div>
</div>
